<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQ_HelloWorld</title>
    <!-- 我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本 -->
    <!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> -->
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script>
        /*
         * 界面上所有的dom元素加载完成的时候调用ready
         * JQ入口函数的其他写法
         * jQuery(document).ready(function (){})
         * $(function(){})
         * jQuery(function(){})
         */
        $(document).ready(function () {
            // jQ和原生js入口函数(window.onload)的区别
            // jQ入口函数不可以拿到dom元素的宽高
            /**
             * 原生JS和jQ入口函数加载模式不同
             * 原生JS会等到DOM元素加载完毕,并且图片也加载完毕
             * jQ只等到DOM元素加载完毕
             */
            /*
             * 原生JS编写了多个入口函数,后面编写的会覆盖前面编写的
             * jQ后写的入口函数,后面的不会覆盖前面的
             */
        });
        //解决冲突
        var qzz = jQuery.noConflict();
        // 核心函数
        // 1.接受一个函数
        qzz(function () {
            //2字符串选择器
            // 返回jq对象,对象保存了找到的DOM元素
            var q_title = qzz(".title");
            console.log("字符串选择器", q_title);
            //3接受一个字符串代码片段
            // 返回jq对象,对象保存了创建的DOM元素
            var q_p = qzz("<p>我是段落</p>");
            console.log("字符串代码片段", q_p);
            q_title.append(q_p);
            //4接受DOM元素
            // 返回jq对象,DOM元素包装成jq对象
            var title = document.getElementsByClassName("title")[0];
            var q_title2 = qzz(title);
            console.log("接受DOM元素", q_title2);

            /** jq对象
             * jq对象是是一个伪数组
             * 什么是伪数组? 
             * 有0到length-1的属性,并且㓟length属性
             */

        });
    </script>
</head>

<body></body>
<div class="title">
    avc
</div>

</html>